<!-- 基本信息 -->

<template>
  <div class="LiftVertical-MyBase">
    <div>
      <div class="ellips">
        <label>电梯名称</label>
        <span>{{ obj.deviceName || '-' }}</span>
      </div>
    </div>

    <div>
      <div class="ellips">
        <label>当前速度</label>
        <span>{{ obj.props.speed.text ? `${obj.props.speed.text / 100} 米/秒` : '-' }}</span>
      </div>
    </div>

    <div>
      <div class="ellips">
        <label>厂商</label>
        <span>{{ obj.manufacturerName || '-' }}</span>
      </div>
    </div>

    <div>
      <div class="ellips">
        <label>平层状态</label>
        <span>{{ obj.props.level.text || '-' }}</span>
      </div>
    </div>

    <div>
      <div>
        <label>故障信息</label>
        <span :class="statusClass">{{ obj.props.faultName.text || '正常' }}</span>
      </div>
    </div>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import props from './props'

const getImg = (name) => CORE.common(`monitor/lift/${name}.png`)

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MyBase',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb()],

  /**
   * 属性注册 (抽取以便查阅)
   */
  props,

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 电梯关门
     */
    liftClose: () => getImg('lift-close'),

    /**
     * 电梯开门
     */
    liftOpen: () => getImg('lift-open'),

    /**
     * 状态样式类
     */
    statusClass() {
      const name = 'LiftVertical-MyBase-status'
      const alarmStr = this.obj.props.faultName.text ? ` ${name}-alarm` : ''
      return `${name}${alarmStr}`
    },
  },
}
</script>

<style lang="scss">
@import './index.scss';
</style>
